$(function () {
  let layer = layui.layer;
  let tbody = document.querySelector('.layui-table tbody');
  let addBtn = document.querySelector('.addBtn')
  // 获取文章分类列表
  function getArticle() {
    $.ajax({
      method: "GET",
      url: "/my/cate/list",
      success: function (res) {
        if (res.code !== 0) {
          return layer.msg(res.code);
        }
        showArticle(res.data);
        // console.log(res.data);
      }
    });
  }
  getArticle();

  // 渲染数据
  function showArticle(article) {
    article.forEach(function (item, index) {
      // 创建tr标签
      let tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${index + 1}</td>
        <td>${item.cate_name}</td>
        <td>${item.cate_alias}</td>
        <td>
          <button type="button" class="layui-btn layui-btn-radius chage" data-id="${index + 1}">编辑</button>
          <button type="button" class="layui-btn  layui-btn-radius layui-btn-danger dele" data-id="${index + 1}">删除</button>
        </td>`
      tbody.appendChild(tr);
    })
  }

  // 添加文章数据
  let indexAdd = null;
  addBtn.addEventListener('click', function () {
    indexAdd = layer.open({
      title: '添加文章分类',
      content: $('#article-add').html(),
      area: ['500px', '250px'],
      type: 1,
    });
  });

  // 确认添加,要通过代理的形式为articleForm表单绑定submit事件
  $("body").on('submit', '#articleForm', function (e) {
    e.preventDefault();
    let name1 = document.querySelector('#articleForm .name1');
    let name2 = document.querySelector('#articleForm .name2');
    $.ajax({
      method: "POST",
      url: "/my/cate/add",
      data: {
        cate_name: name1.value,
        cate_alias: name2.value
      },
      success: function (res) {
        if (res.code !== 0) {
          return layer.msg(res.message)
        }
        tbody.innerHTML = '';
        getArticle();
        layer.msg(res.message);
        layer.close(indexAdd)
      }
    });
  });

  // 点击编辑按钮
  let indexBj = null;
  let indexDel = null;
  tbody.addEventListener('click', function (e) {
    let cname = e.target.className;
    if (e.target.nodeName === 'BUTTON' && cname === 'layui-btn layui-btn-radius chage') {
      indexBj = layer.open({
        title: '编辑文章分类',
        content: $('#article-bj').html(),
        area: ['500px', '250px'],
        type: 1,
      });
      let index = e.target.dataset.id;
      $.ajax({
        method: "GET",
        url: "/my/cate/info",
        data: {
          id: index,
        },
        success: function (res) {
          if (res.code !== 0) {
            return layer.msg(res.code);
          }
          console.log(res.data);
          // let indexId = res.data[index - 1]; //拿到对应索引号的数据
          let name3 = document.querySelector('.name3');
          let name4 = document.querySelector('.name4');
          let nameId = document.querySelector('input[name="id"]');
          nameId.value = res.data.id;
          name3.value = res.data.cate_name;
          name4.value = res.data.cate_alias;
        }
      });
    }
    if (e.target.nodeName === 'BUTTON' && cname === 'layui-btn  layui-btn-radius layui-btn-danger dele') {
      // console.log(e.target.dataset.id);
      indexDel = layer.open({
        title: '提示',
        icon:3,
        content: '你确定删除吗?',
        btn: ['确定', '取消'],
        yes: function (index, layero) {
          // 确定的回调函数
        },
        btn2: function (index, layero) {
          //  取消的回调函数
        }
      });
      // 根据id删除文章分类
      $.ajax({
        method:'DELETE',
        url:'/my/cate/del',
        data:{
          id:e.target.dataset.id
        },
        success:function (res) {
          console.log(res);
          }
      })
    }
  });

  // 点击确认编辑
  $('body').on('submit', '#articleBj', function (e) {
    e.preventDefault();
    // let name3 = document.querySelector('.name3');
    // let name4 = document.querySelector('.name4');  
    // let myId = document.querySelector('#myId');
    // console.log(name3.value);
    // console.log(name4.value);
    // console.log(myTd);
    // 拿到更新分类数据
    $.ajax({
      method: "PUT",
      url: '/my/cate/info',
      data: $(this).serialize(),
      success: function (res) {
        if (res.code !== 0) {
          return layer.msg(res.message)
        }
        // console.log(res);
        layer.msg(res.message);
        tbody.innerHTML = '';
        getArticle();
        layer.close(indexBj);
      }
    })
  })



})